{% block sw_settings_payment_overview %}
<sw-page class="sw-settings-payment-overview">

    {% block sw_settings_payment_overview_smart_bar_actions %}
    <template #smart-bar-actions>

        {% block sw_settings_payment_overview_smart_bar_actions_add %}
        <mt-button
            v-tooltip="{
                message: $tc('sw-privileges.tooltip.warning'),
                disabled: acl.can('payment.creator'),
                showOnDisabledElements: true
            }"
            class="sw-settings-payment-overview__button-create"
            :disabled="!acl.can('payment.creator') || undefined"
            variant="primary"
            size="default"
            @click="$router.push({ name: 'sw.settings.payment.create' })"
        >
            {{ $tc('sw-settings-payment.list.buttonAddPaymentMethod') }}
        </mt-button>
        {% endblock %}

    </template>
    {% endblock %}

    {% block sw_settings_payment_overview_smart_bar_header %}
    <template #smart-bar-header>

        {% block sw_settings_payment_overview_smart_bar_header_title %}
        <h2 class="sw-settings-payment-overview__title">
            {{ $tc('sw-settings-payment.general.mainMenuItemGeneral') }}
        </h2>
        {% endblock %}

    </template>
    {% endblock %}

    {% block sw_settings_payment_overview_language_switch %}
    <template #language-switch>
        <sw-language-switch @on-change="onChangeLanguage" />
    </template>
    {% endblock %}

    {% block sw_settings_payment_overview_content %}
    <template #content>

        {% block sw_settings_payment_overview_content_inner %}
        <sw-card-view class="sw-settings-payment-overview__content">

            {% block sw_settings_payment_overview_sorting_modal_card %}
            <mt-card
                class="sw-settings-payment-overview__sorting_modal_card"
                position-identifier="sw-settings-payment-overview-sorting-modal-card"
            >
                <sw-button-process
                    :disabled="isLoading || undefined"
                    :is-loading="isLoading"
                    :process-success="false"
                    variant="primary"
                    ghost
                    @click="showSortingModal = true"
                >
                    {{ $tc('sw-settings-payment.overview.openSortingModalButton') }}
                </sw-button-process>
            </mt-card>
            {% endblock %}

            {% block sw_settings_payment_overview_list %}
            <template
                v-for="card in paymentMethodCards"
                :key="card.id"
            >

                <template v-if="card.hasCustomCard">
                    {% block sw_settings_payment_overview_list_card_custom_location %}
                    <sw-extension-component-section
                        :key="`extension-${card.id}`"
                        :position-identifier="card.positionId"
                    />
                    {% endblock %}
                </template>

                <template v-if="card.hasCustomCard && card.component">
                    {% block sw_settings_payment_overview_list_card_custom_card %}
                    <component
                        :is="card.component"
                        :key="`component-${card.id}`"
                        :payment-methods="card.paymentMethods"
                        @set-payment-active="togglePaymentMethodActive"
                    />
                    {% endblock %}
                </template>

                <template v-if="!card.hasCustomCard">
                    {% block sw_settings_payment_overview_list_card_default %}
                    <sw-payment-card
                        :key="`default-${card.id}`"
                        :payment-method="card.paymentMethod"
                        @set-payment-active="togglePaymentMethodActive"
                    />
                    {% endblock %}
                </template>

            </template>
            {% endblock %}

            {% block sw_settings_payment_overview_empty_state %}
            <sw-empty-state
                v-if="isEmpty"
                :title="$tc('sw-empty-state.messageNoResultTitle')"
            >
                <template #default>
                    {{ $tc('sw-empty-state.messageNoResultSublineBefore') }}
                    <router-link
                        class="sw-empty-state__description-link"
                        :to="{ name: 'sw.profile.index.searchPreferences' }"
                    >
                        {{ $tc('sw-empty-state.messageNoResultSublineLink') }}
                    </router-link>
                    {{ $tc('sw-empty-state.messageNoResultSublineAfter') }}
                </template>
            </sw-empty-state>
            {% endblock %}

        </sw-card-view>
        {% endblock %}

        {% block sw_settings_payment_overview_sorting_modal %}
        <sw-settings-payment-sorting-modal
            v-if="showSortingModal"
            :payment-methods="paymentMethods"
            @modal-close="showSortingModal = false"
            @modal-save="loadPaymentMethods"
        />
        {% endblock %}
    </template>
    {% endblock %}
</sw-page>
{% endblock %}
